<template>
  <div class="main">
    <!-- 内容区 -->
    <div>
      <!-- 定时任务信息展示 -->
      <tr class="top">
        <td>任务名称</td>
        <td>发送规则</td>
        <td>所属机器人</td>
        <td>所属人</td>
        <td>下次执行时间</td>
        <td>操作</td>
      </tr>
      <!-- 内容展示 -->
      <tr class="top content" v-for="(item, index) in allTask.list" :key="index">
        <!-- item.task_id -->
        <td>{{ item.task_name }}</td>
        <td>{{ item.detail_time_for_user }}</td>
        <td>{{ item.robot_name }}</td>
        <td>{{ item.user_name }}</td>
        <td>{{ item.next_time }}</td>
        <td class="anniu">
          <a-popconfirm title="你确定要删除这个定时任务吗？" ok-text="Yes" cancel-text="No" @confirm="confirm" @cancel="cancel">
            <a-button type="danger" size="small" @click="remove(index)">删除</a-button>
          </a-popconfirm>
          <a-button type="primary" size="small" style="margin-left: 5px;" @click="showModal(index)">
            修改
          </a-button>                                                                                          
          <a-button type="primary" class="goon" size="small" @click="taskPause(index)" 
          v-if="!item.is_suspend"
            style="background-color: rgb(115, 0, 255);border-color: rgb(115, 0, 255);">暂停</a-button>
          <a-button type="primary" class="goon" size="small" @click="taskPause(index)" v-else
            style="background-color: green; border-color: green;">继续</a-button>
        </td>
        <a-modal v-model="visible" title="修改任务">
            <template slot="footer">
              <a-button key="back" @click="handleCancel">
                取消
              </a-button>
              <a-button key="submit" type="primary" :loading="loading" @click="change">
                确定
              </a-button>
            </template>
            <p>
              任务名称<a-input v-model="changeTask.task_name" />
              <a-form-model-item label="重复时间类型">
                <a-select v-model="changeTask.repeat_time" style="width: 100%;">
                  <a-select-option value="立即发送">
                    立即发送
                  </a-select-option>
                  <a-select-option value="仅发送一次">
                    仅发送一次
                  </a-select-option>
                  <a-select-option value="周重复">
                    周重复
                  </a-select-option>
                  <a-select-option value="spec">
                    spec
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            <div>
              
              <div v-if="changeTask.repeat_time === '仅发送一次'">
                可选时间框<div>
                  <a-date-picker show-time v-model="changeTask.detail_time" placeholder="请选择时间" @change="twochange"
                     />
                  <br />
                </div>
                
              </div>
              <div v-if="changeTask.repeat_time === '周重复'">

                <a-form-model-item label="请选择周几发送" prop="type">
                  <a-checkbox-group v-model="forms.type">
                    <a-checkbox value="0" name="type">
                      日
                    </a-checkbox>
                    <a-checkbox value="1" name="type">
                      一
                    </a-checkbox>
                    <a-checkbox value="2" name="type">
                      二
                    </a-checkbox>
                    <a-checkbox value="3" name="type">
                      三
                    </a-checkbox>
                    <a-checkbox value="4" name="type">
                      四
                    </a-checkbox>
                    <a-checkbox value="5" name="type">
                      五
                    </a-checkbox>
                    <a-checkbox value="6" name="type">
                      六
                    </a-checkbox>~
                  </a-checkbox-group>
                </a-form-model-item>

                 <a-time-picker v-model="changeTask.detail_time" valueFormat="string" placeholder="请选择时间"
                  @change="onChange" style="display: none;" />
                <a-time-picker placeholder="请选择时间" @change="onChange" />
              </div>

              <div v-if="changeTask.repeat_time === 'spec'">
                spec   (详情请参考<a href="https://github.com/robfig/cron">https://github.com/robfig/cron</a>) <a-input v-model="changeTask.spec" />
              </div>
            </div> 

            是否全体通知<a-radio-group name="radioGroup" :default-value="1" v-model="changeTask.msg_text.at.isAtAll"
              style="padding-right: 100%;margin: 10px;">
              <a-radio :value="true">
                是
              </a-radio>
              <a-radio :value="false">
                否
              </a-radio>
            </a-radio-group>
            <div v-if="changeTask.msg_text.at.isAtAll === false">
                通知人员姓名：<a-auto-complete v-model="changeTask.msg_text.at.atMobiles[0].name" :data-source="dataSource"
                  style="width: 100%" placeholder="请输入姓名" @search="inputChange" 
                  />
                <br>
              </div>
            通知内容<a-input v-model="changeTask.msg_text.text.content" />
            </p>
          </a-modal>
      </tr>
    </div>
    <!-- 分页器 -->
    <div v-if="isShowPage" >
      <a-pagination v-model="detail.page" :total="allTask.total" show-less-items @change="sizeChange" />
    </div>
  </div>
</template>

<script>
import { reqGetAllTask, reqRemoveTask, reqChangeTask,getTaskDetailByID,getPersonName} from "@/api";
import {_debounce} from '@/utils/fangdou';
export default {
  // inject: ['reload'],  //注入依赖
  data() {
    return {
      loading: false,
      visible: false,
      allTask: [],
      taskDetail:[],
      isShowPage : true,
      DeletedAt: [],
      dataSource: [''],
      task_id: '',
      weeks: '',
      id: '',
      ID: '',
      forms: {
        type: [],
      },
      twoTask: '暂停任务',
      changecontent: '',
      changeTask: {
        "id": '',
    "is_suspend": false,
    "task_name": "",
    "msg_text": {

        "at": {
            "atMobiles": [{
              "atMobile": "",
                "name":'',
            }],
            "isAtAll": false
        },
        "text": {
            "content": ""
        },
        "msgtype": "text"
    },
    "repeat_time": "",
    "detail_time": "",
    "spec": "",
    "robot_id": ""
      },
      detail:{
    page: 1,
    pageSize: 10,
    robot_id: "",
    is_suspend: false,
    task_name: ""
}
    };
  },
  mounted() {
    this. getAllTask();
    const token1 = localStorage.getItem("token");
    console.log(token1);
    if (token1 === "undefined") {
      this.isShowPage = false;
      console.log(this.isShowPage);
    }
  },
  methods: {
    // 获取任务列表的方法
    getAllTask() {
      // 获取所有任务列表
      reqGetAllTask(this.detail).then((res) => {
        this.allTask = res.data;
      });
    },
     // 分页
     sizeChange(val) {
      this.detail.page = val;
      reqGetAllTask(this.detail).then((res) => {
        this.allTask = res.data;
        console.log(this.allTask);
      });
  
    },
    // 修改任务
    showModal(index) {
      getTaskDetailByID(this.allTask.list[index].ID).then((res) => {
        this.taskDetail = res.data;
        console.log(this.taskDetail );
      this.changeTask.task_name = this.taskDetail.msg_text.text.content;
      this.changeTask.repeat_time= this.taskDetail.front_repeat_time;
      this.changeTask.detail_time=this.taskDetail.front_detail_time
      this.changeTask.msg_text.at.isAtAll=this.taskDetail.msg_text.at.isAtAll
      this.changeTask.msg_text.text.content=this.taskDetail.msg_text.text.content
      this.changeTask.msg_text.at.atMobiles[0].name=this.taskDetail.msg_text.at.atMobiles[0].name
      this.changeTask.msg_text.at.atMobiles[0].atMobile=this.taskDetail.msg_text.at.atMobiles[0].atMobile
      this.changeTask.robot_id=this.taskDetail.robot_id
      this.changeTask.id=this.taskDetail.ID
      this.visible = true;
      console.log(this.changeTask.msg_text.at.atMobiles[0].atMobile);
      })
    },
    //确定修改
    change() {
      console.log(this.changeTask.msg_text.at.atMobiles[0].atMobile+"52222222");
      reqChangeTask(this.changeTask).then((res) => {
        console.log(res);
        setTimeout(() => {
          if (res.code == 0) {
            this.$message.success('修改定时任务成功');
          } else {
            this.$message.error('修改定时任务失败');
          }
        }, 600);
      });
      this.visible = false
    },
    handleCancel(e) {
      this.visible = false;
    },
    // 暂停任务
    taskPause(index) {
      getTaskDetailByID(this.allTask.list[index].ID).then((res) => {
        this.taskDetail = res.data;
        console.log(this.taskDetail );
      this.changeTask.task_name = this.taskDetail.msg_text.text.content;
      this.changeTask.repeat_time= this.taskDetail.front_repeat_time;
      this.changeTask.detail_time=this.taskDetail.front_detail_time
      this.changeTask.msg_text.at.isAtAll=this.taskDetail.msg_text.at.isAtAll
      this.changeTask.msg_text.text.content=this.taskDetail.msg_text.text.content
      // this.changeTask.msg_text.at.atMobiles.atMobile=this.taskDetail.msg_text.text.at.atMobiles.atMobile
      this.changeTask.robot_id=this.taskDetail.robot_id
      this.changeTask.id=this.taskDetail.ID
this.changeTask.is_suspend=this.changeTask.is_suspend; 

})
setTimeout(() => {
  //看是暂停还是继续
  if (!this.allTask.list[index].is_suspend ) {
        this.changeTask.is_suspend=true;
  //暂停请求
reqChangeTask(this.changeTask).then((res) => {
          console.log(res);
          setTimeout(() => {
            if (res.code == 0) {
              this.$message.success('暂停任务成功');
           
            } else {
              this.$message.error('暂停任务失败');
            }
          }, 600);
        })
      }else{
        this.changeTask.is_suspend=false;
        reqChangeTask(this.changeTask).then((res) => {
          console.log(res);
        setTimeout(() => {
            if (res.code == 0) {
              this.$message.success('继续任务成功');

            } else {
              this.$message.error('继续任务失败');
            }
          }, 600);
      })
    }
}, 500);
      setTimeout(() => {
        this.getAllTask();

      }, 600)
      // this.getAllTask();
    },
    // // 继续任务
    // taskCon(index) {
      
   
    //   if (this.allTask.list[index].DeletedAt != null) {
       
    //       setTimeout(() => {
    //         if (res.code == 0) {
    //           this.$message.success('继续任务成功');
    //         } else {
    //           this.$message.error('继续任务失败');
    //         }
    //       }, 600);
    //     })
    //   }
    //   setTimeout(() => {
    //     this.getAllTask();
    //   }, 0)
    //   this.getAllTask();
    // },

    // 删除任务模块
    // 获取想要删除任务的ID
    remove(index) {
      this.ID = this.allTask.list[index].ID;
      console.log(this.ID);
    },
    // 进行确认删除操作
    confirm(e) {
      console.log({ ID: this.ID });
      reqRemoveTask({ ID: this.ID }).then((res) => {
        console.log(this.ID);
        console.log(res);
        setTimeout(() => {
          if (res.code == 0) {
            location.reload();
            this.$message.success('删除成功');
          
          } else {
            this.$message.error('删除任务失败');
          }
        }, 600);
      });
    },
    cancel(e) {
      console.log(e.target);
      this.$message.error('已取消删除');
    },
    // input值改变时触发
   inputChange:_debounce(function(){
     getPersonName(this.changeTask.msg_text.at.atMobiles.name).then((res)=>{
this.dataSource=res.data.list.map((user)=>{
return user.name;
});
this.changeTask.msg_text.at.atMobiles=res.data.list.map((user)=>{
return {
  name:user.name,
  atMobile:user.mobile
};
});
        console.log(this.dataSource);
        console.log(this.changeTask.msg_text.at.atMobiles);
      })
    },300),
     // 时间
     onChange(value, dateString) {
      this.changeTask.detail_time = dateString;
      // 拼接周重复的字符串
      this.weeks = this.forms.type.join('/')
      this.changeTask.repeat_time = this.changeTask.repeat_time + '/' + this.weeks
    },
    //仅发送一次时间
    twochange(value, dateString) {
      this.changeTask.detail_time = dateString;
      console.log(this.changeTask.detail_time);
    },
  },
  watch: {
    DeletedAt: {
      handler(newValue, oldValue) {
      }
    }
  },
  mounted() {
    this.getAllTask();
  },
};
</script>

<style>
.main {
  width: 100%;
}

.top {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
  margin-left: 10px;
  height: 50px;
  line-height: 50px;
  background-color: #eaf4fe;
}

/* .top td {
  width: 25%;
  text-align: center;
} */

.content {
  margin-top: 0px;
  /* text-align: center; */
  background-color: #fff;
}

/* .content td {
  overflow: hidden;
  justify-content: center;
  width: 16.6%;
} */

.content:hover {
  background-color: #eaf4fe;

}

/* .anniu {
  display: flex;
  flex-wrap: wrap;
} */

.goon {
  margin-left: 5px;
}
.ant-pagination {
  width: 300px;
  padding-top: 20px;
  margin: 0 auto;
}
</style>